<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Vue.js + JSP + Servlet Demo</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="fetchData">获取数据</button>
        <ul>
            <li v-for="item in items">{{ item }}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '欢迎使用Vue.js + JSP + Servlet Demo',
                items: []
            },
            methods: {
                fetchData: function () {
                    // 使用 AJAX 请求从 Servlet 获取数据
                    fetch('TestServlet')
                        .then(response => response.json())
                        .then(data => {
                            this.items = data;
                        });
                }
            }
        });
    </script>
</body>
</html>
